<!--<template>
    <div class="login_container" style="width: 100%; height: 100vh; overflow: hidden"> &lt;!&ndash;  :style="bg" 加背景图片&ndash;&gt;
        <div style="width: 400px; margin: 100px auto">
            <div style="font-size: 30px; text-align: center; padding: 30px 0;color: #eeeeee">欢迎登录</div>
            <el-form ref="form" :model="form" size="normal" :rules="rules">
                <el-form-item prop="username">
                    <el-input prefix-icon="el-icon-user-solid" v-model="form.username"
                              placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input prefix-icon="el-icon-lock" v-model="form.password" show-password
                              placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <div style="display: flex;">
                        <el-input prefix-icon="el-icon-key" v-model="form.validCode" style="width: 50%;"
                                  placeholder="请输入验证码"></el-input>
                        <ValidCode style="background-color: #fff;border-color: #fff;" @input="createValidCode"/>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-radio v-model="form.role" :label="1">管理员</el-radio>
                    <el-radio v-model="form.role" :label="2">普通用户</el-radio>
                </el-form-item>
                <el-form-item>
                    <el-button style="width: 100%" type="primary" @click="login">登 录</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="text" @click="$router.push('/register')">前往注册 >></el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>-->
<template>
    <div id="login">
        <el-form ref="form" :model="form" size="normal" :rules="rules">
            <div id="login-form" @keyup.enter="inputInfo" style="top: 35%">
                <h1>欢迎登录</h1>
                <label for="username"><i class="el-icon-user-solid" style="color: #c1c1c1"></i></label>
                <input type="text" placeholder="用户名" name="username" id="username" autocapitalize="off"
                       v-model="form.username" aria-autocomplete="off">
                <label for="password"><i class="el-icon-right" style="color: #c1c1c1"></i></label>
                <input type="password" placeholder="密码" name="password" id="password" autocapitalize="off"
                       v-model="form.password">
                <label for="password"><i class="el-icon-right" style="color: #c1c1c1"></i></label>
                <div>
                <input type="text" placeholder="验证码" name="password" id="validCode" autocapitalize="off"
                       v-model="form.validCode">
                <ValidCode style="background-color: #fff;border-color: #fff;" @input="createValidCode"/>
                </div>
                <div>
                    <el-button type="primary" v-on:click="login">登录</el-button>
                    <el-button type="info" @click="$router.push('/register')">前往注册 >></el-button>
                </div>
            </div>
        </el-form>
    </div>
</template>

<script>
    import request from "@/utils/request";
    import ValidCode from "@/components/ValidCode";

    export default {
        name: "Login",
        components: {
            ValidCode
        },
        data() {
            return {
                form: {role: 1},
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ],
                },
                validCode: ''
                // 加背景图片
                // bg: {
                //   backgroundImage: "url(" + require("@/assets/bg.jpg") + ")",
                //   backgroundRepeat: "no-repeat",
                //   backgroundSize: "100% 100%"
                // }
            }
        },
        created() {
            sessionStorage.removeItem("user")
        },
        methods: {
            // 接收验证码组件提交的 4位验证码
            createValidCode(data) {
                this.validCode = data
            },
            login() {
                this.$refs['form'].validate((valid) => {
                    console.log("打印表单数据：", this.form)
                    if (valid) {
                        if (!this.form.validCode) {
                            this.$message.error("请填写验证码")
                            return
                        }
                        if (this.form.validCode.toLowerCase() !== this.validCode.toLowerCase()) {
                            this.$message.error("验证码错误")
                            return
                        }
                        request.post("/user/login", this.form).then(res => {
                            if (res.code === '0') {
                                this.$message({
                                    type: "success",
                                    message: "登录成功"
                                })
                                sessionStorage.setItem("user", JSON.stringify(res.data))  // 缓存用户信息
                                this.$router.push("/")  //登录成功之后进行页面的跳转，跳转到主页
                            } else {
                                this.$message({
                                    type: "error",
                                    message: res.msg
                                })
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    #login {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        position: relative;
        background-image: url("../images/bg4.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: cover;
    }

    #login-form {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50vw;
        min-width: 300px;
        max-width: 400px;
        display: flex;
        flex-direction: column;
        background-color: rgba(0, 0, 0, 0.7);
        border-radius: 15px;
        box-shadow: 0 15px 25px rgba(0, 0, 0, .5);

        h1 {
            width: 60%;
            margin: 50px auto 20px;
            color: #c1c1c1;
            text-align: center;
        }

        input {
            width: 60%;
            margin: 15px auto;
            outline: none;
            border: none;
            padding: 10px;
            border-bottom: 1px solid #fff;
            background: transparent;
            color: white;
        }

        label {
            width: 60%;
            margin: 0 auto;
            position: relative;
            top: 30px;
            left: -15px;
        }

        div {
            width: 60%;
            margin: 10px auto;
            display: flex;
            justify-content: center;
            align-content: center;
        }

        button {
            // rgba
            background-color: rgba(9, 108, 144, 0.5);
            margin: 10px 25px 40px 25px;
        }

        p {
            width: 60%;
            margin: 8px auto;
            position: relative;
            left: -15px;
            color: #ff0000;
            font-size: 8px;
        }
    }

    input {
        -webkit-text-fill-color: #ffffff !important;
        transition: background-color 5000s ease-in-out, width 1s ease-out !important;
    }
</style>
